//JavaScript代码区域
layui.use(['element', 'form', 'table', 'laydate', 'laytpl', 'layer'], function () {
    var element = layui.element,
        form = layui.form,
        table = layui.table,
        laydate = layui.laydate,
        laytpl = layui.laytpl,
        $ = jQuery = layui.jquery,
        layer = layui.layer;

    /* 数据表格渲染 */
    table.render({
        elem: '#orderTable'
        , url: '/info/orders'
        , cellMinWidth: 80
        , cols: [
            [
                {type: 'checkbox'}
                , {field: 'id', title: 'ID', sort: true}
                , {field: 'orderId', title: '订单编号'}
                , {field: 'customerPhone', title: '标题（点击可查看详情）', templet: '#titleTpl', event: 'showDetails'}
                , {field: 'name', title: '品牌'}
                , {field: 'status', title: '状态', templet: '#statusTpl'}
                , {fixed: 'right', width: 180, align: 'center', toolbar: '#orderListBar'}
            ]
        ]
        , page: true
    });

    // 监听数据表格的事件
    table.on('tool(orderTableFlt)', function (obj) {
        if (obj.event === 'showDetails') {
            // 点击标题展示详情
            showOrderDetails(obj, obj.event)
        } else if (obj.event === 'detail') {
            showOrderDetails(obj, obj.event)
        } else if (obj.event === 'edit') {
            layer.msg('id: ' + obj.data.id + ' 的编辑操作: ' + JSON.stringify(obj.data))
        } else if (obj.event === 'del') {
            layer.msg('id: ' + obj.data.id + ' 的删除操作')
        }
    });

    /**
     * 展示订单详情函数
     * @param obj 数据行对象
     * @param event 事件名称string
     */
    function showOrderDetails(obj, event) {
        var data = obj.data;
        // 根据d.id查询详细数据信息，并初始化layer弹出层
        $.get('/info/order', {'id': data.id}, function (res) {
            // 失败
            if (res.code !== 0) return layer.msg(res.msg, {icon: 5});

            const order = res.data;
            // 成功
            // 表单数据填充
            $('#name').val(order.name);
            $('#createTime').val(order.createTime);
            $('#orderId').val(order.orderId);
            $('#customerName').val(order.customerName);
            $('#customerPhone').val(order.customerPhone);
            $('#customerCity').val(order.customerCity);
            $('#customerAddress').val(order.customerAddress);

            // FIXME 完成jquery控制select选中项并对其添加disabled属性（暂时无法生效）
            if (order.status === 0) {
                $('#status').val('0');
            } else if (order.status === 1) {
                $('#status').val('1');
            } else {
                $('#status').val('2');
            }

            // 根据事件类型调整弹出框
            if (event === 'showDetails' || event === 'detail') {
                // 设置所有input为readonly  以及select(disabled)
                $('#orderDetailsForm input').attr('readonly', 'readonly')
                $('#orderDetailsFrom select').attr('disabled', 'disabled')
                // select元素需要重新渲染
                form.render("select");
                layer.open({
                    type: 1,
                    title: '订单详情',
                    shadeClose: true,
                    resize: false,
                    closeBtn: 1,
                    area: ['400px', '500px'], //宽高
                    content: $('#orderDetailsFrame')
                }, function (value, index) {
                    // 表单重置
                    form.render(null, 'orderDetailsForm');
                    // 清除所有input的readonly属性
                    $('#orderDetailsForm input').removeAttr('readonly')
                    // 弹出层关闭
                    layer.close(index);
                });
            } else if (event === 'edit') {
                layer.open({
                    type: 1,
                    title: '编辑订单信息',
                    shadeClose: true,
                    resize: false,
                    closeBtn: 1,
                    area: ['400px', '500px'], //宽高
                    content: $('#orderDetailsFrame')
                }, function (value, index) {
                    // 表单重置
                    form.render(null, 'orderDetailsForm');
                    // 清除所有input的readonly属性 以及select(disabled)
                    $('#orderDetailsForm input').removeAttr('readonly')
                    $('#orderDetailsFrom select').removeAttr('disabled')
                    // select元素需要重新渲染
                    form.render("select");

                    // 弹出层关闭
                    layer.close(index);
                });
            }

        })
    }
});